<template>
  <uni-nav-bar title="我的蓝宝石" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="integral">
    <view class="column top_integral">
      <view><text style="font-size: 32rpx;">可用蓝宝石</text><text>{{integralAll}}</text></view>
      <view class="center" style="justify-content:space-around;color:#1FA0FF;width:100%;margin-top:10rpx;">
        <view>累计蓝宝石：{{count}}</view>
        <view>已消耗蓝宝石：{{use}}</view>
      </view>
    </view>
  </view>
  <view class="package datas" style="padding: 10rpx;">
    <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
      @change="change" />
  </view>
  <view class="package">
    <!--    <view class="totalAlls" @click="open()">
      <text>{{ SceneName }}</text>
      <image src="../../static/account/account-arrow-down.png" mode=""></image>
    </view> -->
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height: pageHeight + 'px' }">
      <view class="space-between inteList" v-for="(item, index) in orderLists" :key="index">
        <view>
          <text>{{ item.memo }}</text>
          <text>{{ item.createtime }}</text>
        </view>
        <view>{{ item.score }}</view>
      </view>
      <view v-if="orderLists.length < 1" class="fillings" :style="{ height: pageHeight + 'px' }">
        <image :src="Empty2"></image>
        <text>暂无记录</text>
      </view>
    </scroll-view>
  </view>
  <!-- 筛选弹框 -->
  <uni-popup ref="FilterPopup" type="bottom" :is-mask-click="false">
    <view class="Filter">
      <view class="filter_text">
        <uni-icons type="closeempty" size="26" @click="close()"></uni-icons>
        <text>选择筛选项</text>
        <text></text>
      </view>
      <scroll-view :scroll-y="true" style="height: 35vh;">
        <view class="filter_list">
          <text v-for="(item, index) in SceneList" :key="index" @click="changeAccount(item.name, item.type)" :style="{
	             background: SceneName == item.name ? '#1B91FF ' : '',
	             color: SceneName == item.name ? '#fff' : '',
	           }">
            {{ item.name }}
          </text>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { format, subDays } from 'date-fns';
  import { getDriverID } from '@/stores/driverID';
  import { integralList } from '@/gql/user';
  import { getGemLog } from '@/gql/gemstone';
  import { toPublish } from '@mqtt';
  import { onShow } from '@dcloudio/uni-app';
  import { onMounted, ref } from 'vue';
  import { Empty2 } from '@/utils/Static';
  /**
   * 积分主页
   * @param SceneName  积分类型名称
   * @param SceneList  积分类型列表
   * @param FilterPopup  积分类型赛选框值
   * @param driver_id  用户ID
   * @param orderLists  积分记录列表
   * @param isLoading  上拉加载状态
   * @param lastPage  积分总页数
   * @param currentPage  当前获取页数
   * @param integralAll  可用积分
   * @param count  累计积分
   * @param pageHeight  积分列表高度
   * @param type  积分类型type值
   * @return
   */
  const SceneName = ref('');
  const SceneList = ref([]);
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);
  const FilterPopup = ref(null);


  const driver_id = getDriverID();
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const integralAll = ref('');
  const use = ref('')
  const count = ref('');
  const pageHeight = ref('');
  const type = ref('')
  onMounted(() => {
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - 230).toString();
      },
    });
  });
  onShow(() => {
    orderLists.value = []
    currentPage.value = 1
    integral()
  })
  /**
   * 获取积分页面信息
   * @param driver_id  用户ID
   * @param page  当前页数
   * @param start  开始时间
   * @param end  结束时间
   */
  function integral() {
    isLoading.value = true;
    const payload = {
      query: getGemLog,
      variables: {
        driver_id,
        page: currentPage.value,
        start,
        end,
      },
    };
    toPublish('ql/score/getGemLog', payload, (obj : any) => {
      const { getGemLog } = obj.data;
      isLoading.value = false;
      integralAll.value = getGemLog.score;
      use.value=getGemLog.use
      orderLists.value = [...orderLists.value, ...getGemLog.list];
      lastPage.value = getGemLog.lastpage;
      count.value = getGemLog.count;
    });
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      integral();
    }
  }
  /**
   * 时间筛选
   * @param currentPage  当前页数
   * @param orderLists  清空积分列表
   * @param start  开始时间
   * @param end  结束时间
   * @return 再次获取积分列表数据
   */
  function change([sta, en]) {
    currentPage.value = 1;
    orderLists.value = [];
    start = sta;
    end = en;
    integral();
  }
  /**
   * 类型筛选
   * @param type  类型值
   * @param SceneName  类型名称
   * @param currentPage  当前页数
   * @param orderLists  清空积分列表
   * @return 再次获取积分列表数据 关闭类型弹框
   */
  function changeAccount(name, ty) {
    type.value = ty
    SceneName.value = name
    currentPage.value = 1;
    orderLists.value = [];
    integral();
    close()
  }
  /**
   * 打开类型弹框
   */
  function open() {
    FilterPopup.value.open();
  }
  /**
   * 关闭类型弹框
   */
  function close() {
    FilterPopup.value.close();
  }
</script>

<style scoped lang="less">
  @import url('../pointsMall/less/integral.less');
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>